import { Component, ViewEncapsulation } from '@angular/core';
import { getLocaleDayNames } from '@angular/common';

@Component({
  selector: 'app-demo14',
  templateUrl: './demo14.component.html',
  styles: [``],
  encapsulation: ViewEncapsulation.None
})
export class Demo14Component {
  date: Date = new Date();
  rangeDate = [new Date('2020-06-10'), new Date('2020-12-20')];
  tag = '';
  min = new Date('2020-01-10 12:00:00');
  max = new Date();

  showTime = {
    format: 'HH:mm:ss'
  }
  showTimeRange = {
    format: 'HH:mm:ss',
    disabledHour: hour => {
      if(this.tag === 'end' && this.rangeDate[1]) {
        if (this.currentDay(this.rangeDate[1]) === this.currentDay(this.max)
          && hour > this.max.getHours()) {
          return true;
        }
      }
      if(this.tag === 'start' && this.rangeDate[0]) {
        if (this.currentDay(this.rangeDate[0]) === this.currentDay(this.min)
          && hour < this.min.getHours()) {
          return true;
        }
      }
    },
    disabledMinute: (hour, minute) => {
      if(this.tag === 'end' && this.rangeDate[1]) {
        if (this.currentHour(this.rangeDate[1]) === this.currentHour(this.max)
          && minute > this.max.getMinutes()) {
          return true;
        }
      }
      if(this.tag === 'start' && this.rangeDate[0]) {
        if (this.currentHour(this.rangeDate[0]) === this.currentHour(this.min)
          && minute < this.min.getMinutes()) {
          return true;
        }
      }
    },
    disabledSecond: (hour, minute, second) => {      
      if(this.tag === 'end' && this.rangeDate[1]) {
        if (this.currentMin(this.rangeDate[1]) === this.currentMin(this.max)
          && second > this.max.getSeconds()) {
          return true;
        }
      }
      if(this.tag === 'start' && this.rangeDate[0]) {
        if (this.currentMin(this.rangeDate[0]) === this.currentMin(this.min)
          && second < this.min.getSeconds()) {
          return true;
        }
      }
    }
  };

  rangeChange(e) {
    this.tag = e;
    this.max = new Date();
  }

  disabledDate = date => {
    if(date.getFullYear() > 2020) {
      return true;
    }
  };

  disabledDateRange = date => {
    if (date.getTime() < this.min.getTime() || date.getTime() > this.max.getTime() + 24*60*60*1000) {
      return true;
    }
  };

  currentDay(d) {
    const date = new Date(d.getTime());
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    return date.getTime();
  }

  currentHour(d) {
    const date = new Date(d.getTime());
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    return date.getTime();
  }
  currentMin(d) {
    const date = new Date(d.getTime());
    date.setSeconds(0);
    date.setMilliseconds(0);
    return date.getTime();
  }
}
